<template>
    <div class="goods">
       <div class="nei w">
        <img src="@/assets/imgs/youhui.png" alt="">
        <div class="content">
            <!-- 搜索选项 -->
              <div class="paixu">
                <span>排序:</span>
                <ul>
                    <li @click="handleSelect1(index)" v-for="item,index in list" :key="index" :class="{'active':item.selected}">
                        {{ item.title }}
                    </li>
                    <!-- <li>全部</li>
                    <li>我还可以兑换</li>
                    <li>0-500分</li>
                    <li>1000-1500分</li>
                    <li>1500-2500分</li>
                    <li>2500-6500分</li> -->
                  
                </ul>
              </div>
              <div class="paixu">
                <span>分类:</span>
                <ul>
                    <li @click="handleSelect2(index)" v-for="item,index in leibie" :key="index" :class="{active:item.selected}">{{ item.title }}</li>
                    <!-- <li>全部</li>
                    <li>实体商品</li>
                    <li>虚拟商品</li> -->
                   
                  
                </ul>
              </div>

            <!-- 商品展示 -->
              <List></List>
        </div>
       </div>
    </div>
</template> 

<script lang='ts' setup>
import { ref,reactive } from "vue"
import List from "@/components/home/List.vue"
import { fa } from "element-plus/es/locale";
import { ItemProps } from "element-plus";
let list = ref([
{ title:'全部',selected:true},
{ title:'我还可以兑换',selected:false},
{ title:'0-500分',selected:false},
{ title:'1000-1500分',selected:false},
{ title:'1500-2500分',selected:false},
{ title:'2500-6500分',selected:false}
])

let leibie = ref([{ title:'全部',selected:true},
{ title:'实体商品',selected:false},
{ title:'虚拟商品',selected:false},])

const handleSelect1=(val:number)=>{
    list.value.forEach(item=>{
        item.selected = false
    })
    list.value[val].selected = true;
}
const handleSelect2=(val:number)=>{
    leibie.value.forEach(item=>{
        item.selected = false
    })
    leibie.value[val].selected = true;
}
</script>
 
<style lang = "less" scoped>
    .goods{
        .nei{
            img{
            display: block;
            margin-bottom: 15px;
               
        }
        .content{
            .paixu{
               
                    height: 60px;
                    display: flex;
                    align-items: center;
                    span{

                        
                            font-size: 18px;
                            font-weight: 700;
                        }
                    ul{
                        display: flex;
                        justify-content: space-around
                        ;
                        li{
                            list-style: none;
                            margin: 0 10px ;
                            font-size: 17px;
                            color:#b0adad;
                            &:hover{
                                cursor: pointer;
                            }
                        }
                    }
                
                }
                
            }
            }
    }
    .active{
        color: rgb(22, 22, 130) !important;
    }
    .w{
        width: 1200px;
        margin: 0 auto;
    }
</style>